<!DOCTYPE html>
<html>
<head>
    <title>bDialog可多层嵌套，高定制化的模态窗口</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../css/bdialog/header.css" />
    <link rel="stylesheet" href="../css/bdialog/index.css" />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4688926342467996",
    enable_page_level_ads: true
  });
</script>
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/bdialog/index.html" class="navbar-brand">bDialog</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >Guide</a>
                </li>
                <li>
                    <a href="demo.html" >Demo</a>
                </li>
                <li>
                    <a href="docs.html" >Documentation</a>
                </li>
                <li>
                    <a href="changelog.html" >ChangeLog</a>
                </li>
                <li>
                    <a href="message.html" >Feedback</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bDialog" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="headerBox">
		<div class="container">
			<div class="row headerArea">
				<div class="jumbotron col-md-10 text-left">
					<h1>可多层嵌套，高定制化的弹出窗口</h1>
                    <p>bDialog包含 <strong>Modal</strong>、<strong>Alert</strong>、<strong>Mask</strong>、<strong>Toast</strong>四种模式，基于Bootstrap Modal开发</p>
                    <p>
                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bDialog&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
                        <iframe src="https://ghbtns.com/github-btn.html?user=TerryZ&repo=bDialog&type=fork&count=true" frameborder="0" scrolling="0" width="80px" height="20px"></iframe>
                    </p>
					<p>						
						<a class="btn btn-default btn-lg" href="https://github.com/TerryZ/bDialog" role="button">下载插件</a>
						<a class="btn btn-default btn-lg" href="message.html" role="button">留言/反馈</a>
                        <a class="btn btn-default btn-lg" href="https://github.com/TerryZ/bDialog" target="_blank" role="button"><i class="fa fa-star"></i> 给项目加个Star，支持项目</a>
					</p>
				</div>
			</div>
		</div>
	</div>


	<div class="container">
		<div class="row text-center">
			<img alt="效果图" src="../image/bDialog.png" width="973">
		</div>
	</div>


    <div class="content">
        <div class="container">
			<div class="row" >
              <div class="col-md-6">
                    <h3><i class="fa fa-flag"></i> Bootstrap</h3>
                    <p class="desc">可方便地使用于Bootstrap2、Bootstrap3环境中</p>
              </div>
              <div class="col-md-6">
                    <h3><i class="fa fa-commenting-o"></i> 参数传递</h3>
                    <p class="desc">在打开窗口和关闭窗口时可传递参数，方便处理上下文内容控制</p>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                    <h3><i class="fa fa-object-ungroup"></i> 多层嵌套</h3>
                    <p class="desc">插件支持在已打开的窗口上再次打开新的窗口</p>
                    <p class="desc"><span class="label label-default">友情提示</span> 虽然插件经过各种努力实现了窗口多开，尤其是要支持<strong>IE8</strong>这样的难题，但建议在页面交互的设计上，尽可能避免出现窗口多开的情况出现！</p>
              </div>
              <div class="col-md-6">
                    <h3><i class="fa fa-puzzle-piece"></i> 可定制化</h3>
                    <p class="desc">通过设置初始化参数的，可打开/关闭如标题栏、关闭按钮、全宽度窗口等功能</p>
              </div>
            </div>
		</div>
	</div>
	
	<div class="container">
		<div class="row text-center">
			<img alt="效果图" src="../image/bDialogAlert.png" width="920">
		</div>
	</div>
	
	<div class="content">
		<div class="container">
            <div class="row">
              <div class="col-md-6">
                    <h3><i class="fa fa-tachometer "></i> 多皮肤快速应用</h3>
                    <p class="desc">在需要使用不同样式的皮肤时，只需要定义好皮肤的样式内容，插件可在初始化时，设置指定的皮肤名称</p>
              </div>
              <div class="col-md-6">
                    <h3><i class="fa fa-arrows-alt"></i> 自动调整位置</h3>
                    <p class="desc">当浏览器窗口尺寸发生变化时，窗口将自动重新定位到浏览器正中心位置</p>
              </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <h3><i class="fa fa-file-text-o"></i> 内容展示</h3>
                    <p class="desc">插件支持通过URL获得页面，以iFrame的方式载入页面以获得独立上下文，也支持将页面片段HTML直接放入</p>
                </div>
                <div class="col-md-6">
                    <h3><i class="fa fa-reply-all"></i> 丰富的回调函数</h3>
                    <p class="desc">窗口打开前、后，关闭前、后均提供事件回调，并提供窗口对象方便进行各种操作</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row text-center">
            <img alt="效果图" src="../image/bDialogToast.png" width="920">
        </div>
    </div>

    <div class="content">
        <div class="container">

           <div class="row">
              <div class="col-md-6">
                    <h3><i class="fa fa-rocket"></i> 动画效果</h3>
                    <p class="desc">模态窗口外区域点击、窗口位置自动重新定位等场景时，均有相应的提醒动画效果</p>
              </div>
			</div>
        </div>
    </div>




	<footer class="footer">
		<div class="container">		
		Copyright © 2016-2017 Terry Zeng
		</div>
	</footer>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>